<template>
  <div>
    <draggtreetable :dataSource="dataList" :rowKey="rowKey"></draggtreetable>
  </div>
</template>
<script lang="ts" setup>
import draggtreetable from "@/components/table/draggTreeTable.vue";
import { ref } from "vue";
import columnsName from "@/components/table/tableConfig/columnsName";
//interface
interface DataList {
  [propName: string | number]: any;
}
//data
const rowKey = ref<String | Number>("id");

const dataList = ref<DataList[]>([
  {
    key: 1313123,
    id: 1,
    name: "1",
    age: 60,
    address: "New York No. 1 Lake Park",
    children: [
      {
        key: 11,
        name: "2",
        age: 42,
        address: "New York No. 2 Lake Park",
        id: "11",
        parentId: 1,
      },
      {
        key: 12,
        name: "3",
        age: 30,
        address: "New York No. 3 Lake Park",
        id: "12",
        parentId: 1,
        children: [
          {
            key: 121,
            id: "121",
            name: "4",
            age: 16,
            address: "New York No. 3 Lake Park",
            parentId: 12,
          },
          {
            key: 121,
            id: "122",
            name: "5",
            age: 16,
            address: "New York No. 3 Lake Park",
            parentId: 12,
          },
          {
            key: 121,
            id: "123",
            name: "6",
            age: 16,
            address: "New York No. 3 Lake Park",
            parentId: 12,
          },
        ],
      },
    ],
  },
  {
    key: 2,
    id: "2",
    name: "9",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
]);
</script>
<style lang="less" scoped>
.func-bed {
  padding-bottom: 20px;

  .ant-btn-group {
    margin-left: 10px;
  }
}
</style>
